<template>
    <div>
      <detail-banner
        :sightName="sightName"
        :bannerImg="bannerImg"
        :bannerImgs="gallaryImg"
      ></detail-banner>
      <detail-header ></detail-header>
      <div class="content">
        <detail-list :list="list"></detail-list>
      </div>
    </div>
</template>

<script>
  import axios from 'axios'
  import DetailBanner from './components/Banner'
  import DetailHeader from './components/Header'
  import DetailList from './components/List'
    export default {
      name:'Detail',
      components:{
        DetailBanner,
        DetailHeader,
        DetailList
      },

      data(){
          return {
            list:[],
            sightName:'',
            bannerImg:'',
            gallaryImg:[]
          }
      },
      mounted(){
        this.getDetailInfo()
      },
      methods: {
        getDetailInfo(){
          axios.get('/api/detail.json',{
            params:{
                id:this.$route.params.id
            }
          }).then((res)=>{
            res = res.data
            console.log(res);
            if(res.ret && res.data){
              const data =res.data
              console.log(data)
              this.sightName = data.sightName
              this.bannerImg = data.bannerImg
              this.gallaryImg = data.gallaryImgs
              this.list = data.categoryList
            }
          })
        }
      }
    }
</script>

<style lang="stylus" scoped>
  .content
    height:20rem
</style>
